<script setup>
    import { onMounted } from 'vue'
    import positionIcon from '../../../assets/images/visual.png'
    import { areaPositionIndex } from '@/utils/index'
    import zhouchengJson from '../../../assets/zhoucheng.json'

    const props = defineProps({
        videoConfigurationList: {
            type: Array,
            default: []
        }
    })

    const emit = defineEmits(['showLive'])

    // 设备列表
    let videoConfigurationList = props.videoConfigurationList

    // 创建Map实例
    let map = undefined



    onMounted(() => {

        let arr = videoConfigurationList.map((item) => {
            return [item.coord.split(',')[0], item.coord.split(',')[1]]
        })

        map = new BMapGL.Map("container");            // 创建Map实例
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  

        var point = new BMapGL.Point(...arr[0]);    // 创建点坐标
        map.centerAndZoom(point,13);                     // 初始化地图,设置中心点坐标和地图级别。

        var myIcon = new BMapGL.Icon(positionIcon, new BMapGL.Size(63, 81));
        
        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, -80), // 设置文本偏移量
            };
            var label = new BMapGL.Label(videoConfigurationList[i].towns_dictText + videoConfigurationList[i].name, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "16px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                fontWeight :"bold",
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            map.addOverlay(label);
            map.addOverlay(marker)

            // 鼠标点击坐标
            marker.addEventListener('click', function (e) {

                // 设备号 通道  key
                let { numb, aisle, appkey } = videoConfigurationList[i]
                emit('showLive', {  
                    numb,
                    aisle,
                    appkey
                })
            });
        }
    })


     // 点击区域村 设置该村区域地图中心点
    const setMapCenterPoint = (name) => {

        let pointArray = mapGetCenter(zhouchengJson.features[areaPositionIndex[name]].geometry.coordinates[0])

        // 创建点坐标
        var point = new BMapGL.Point(...pointArray);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 15);                     
    }

    // 获取区域中间点
    const mapGetCenter = (pointArray) => {
        var sortedLongitudeArray = pointArray.map(item => item[1]).sort();//首先对经度进行排序，红色部分是array中经度的名称
        var sortedLatitudeArray = pointArray.map(item => item[0]).sort();//对纬度进行排序，红色部分是array中纬度的名称
        var centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
        const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);

        //如果经纬度在array中不是数字类型，需要转化为数字类型进行计算，如果是可以去掉parseFloat处理
        //console.log(centerLongitude+"kkk"+centerLatitude);
        return [centerLatitude, centerLongitude];
    }

    //  地图类型
    let mapType = [{ name: '地图', code: BMAP_NORMAL_MAP }, { name: '卫星', code: BMAP_SATELLITE_MAP }]
    let currentMapType = $ref('地图')
    const handleClickMapType = ({ name, code }) => {
        currentMapType = name
        map.setMapType(code);
    }

    defineExpose({
        setMapCenterPoint
    })

</script>

<template>
    <div class="agriculture-map-wrap">
        <div id="container"></div>
        <div class="map-tabbar flex-center">
            <div
                v-for="(item, index) in mapType"
                :key="index"
                class="tabbar-item"
                :class="{ active: currentMapType == item.name }"
                @click="handleClickMapType(item)"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .agriculture-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
</style>